@import "../../css/_loginImport";

ul li {
  list-style: none;
}

.sidebar {
  @include size(44rem, 34rem);
  background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/SidebarButton%403x.png") no-repeat center center;
  background-size: contain;
}

.slide {
  left: getRemNum(0) !important;
}

.sidebar-box {
  display: none;
  position: fixed;
  z-index: 100;
  top: 0;
  left: getRemNum(-220rem);
  width: 200%;
  height: 100%;
  background: rgba(0, 0, 0, .4);
  transition: all 0.3s;

  .sidebar-nav {
    position: relative;
    width: getRemNum(220rem);
    height: 100%;
    background: #fff;
    overflow: hidden;

    .sidebar-title {
      margin: getRemNum(32rem) auto getRemNum(28rem);
      width: getRemNum(85rem);
      font-family: PingFangSC-Medium, PingFang SC;
      font-size: getRemNum(14rem);
      color: #161516;
      letter-spacing: getRemNum(0.6rem);
      font-weight: bold;
    }

    ul {
      height: getRemNum(130rem);
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .focus::before {
        position: absolute;
        top: 0;
        left: getRemNum(-31rem);
        background: #89B1FF;
        content: '';
        display: block;
        width: getRemNum(3rem);
        height: getRemNum(20rem);
      }

      .focus {
        color: #89B1FF !important;
      }

      li {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: getRemNum(68rem);
        height: getRemNum(20rem);
        font-family: PingFangSC-Medium, PingFang SC;
        font-size: getRemNum(14rem);
        letter-spacing: getRemNum(0.6rem);
        font-weight: 400;
        margin-left: getRemNum(31rem);
        color: #757575;

        &:nth-child(1) section:nth-child(1) {
          background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/homePage.png") no-repeat;
        }

        &:nth-child(2) section:nth-child(1) {
          background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/search.png") no-repeat;
        }

        &:nth-child(3) section:nth-child(1) {
          background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/my.png") no-repeat;
        }

        .nav-icon {
          width: getRemNum(20rem);
          height: getRemNum(20rem);
          background-size: cover !important;
        }
      }
    }

    .contact-us {
      width: getRemNum(220rem);
      position: absolute;
      bottom: getRemNum(80rem);
      text-align: center;

      .contact-us-title {
        color: #161516;
        font-size: getRemNum(16rem);
        letter-spacing: getRemNum(0.8rem);
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 600;
      }

      .contact-us-email {
        margin-top: getRemNum(16rem);
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999999;
        letter-spacing: getRemNum(0.7rem);
        font-size: getRemNum(14rem);
      }
    }
  }
}

footer {
  //position: absolute;
  //bottom: 0;
  //left: 50%;
  //transform: translate(-50%);
  width: getRemNum(375rem);
  margin: 0 auto;
  height: getRemNum(65rem);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  font-size: getRemNum(11rem);
  border-top: #D8D8D8 solid getRemNum(1rem);
  background: #F5F5F5;
  color: #999;

  & > section:nth-child(2) {
    display: flex;
    margin-left: getRemNum(9rem);

    a {
      color: #999;
    }

    section {
      width: getRemNum(13rem);
      height: getRemNum(13rem);
      background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/Record%403x.png") no-repeat;
      background-size: contain;
    }
  }
}

.end {
  height: getRemNum(10rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: getRemNum(21rem) 0;
  font-size: getRemNum(12rem);
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #D8D8D8;
  background: #F5F5F5;

  section {
    width: getRemNum(14rem);
    height: getRemNum(13rem);
    background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/emoticon%403x.png") no-repeat;
    background-size: contain;
    margin-right: getRemNum(4rem);
  }
}